<script setup lang="ts">
import {useTheme} from "@/hooks/useTheme"
import {getUserByPage} from '@/api/user'
import {User} from '@/types/user'
import {users} from './mark'
import {useUserStore} from "@/store/modules/user";
import {Page} from "@/types/response";

const userStore = useUserStore()
console.log('user', userStore)


const userPageData = reactive<Page<User[]>>({
  data: [
    ...users
  ]
})

const activeThemeName = useTheme()
const loading = ref(false)
let page = 1

const goPage = () => {
  page = page + 1
  loading.value = true
  getUserByPage({page: page, key: ''}).then(res => {
    Object.assign(users, res.response)
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}

const localContent = () => {
  console.log(useUserStore())
}


</script>

<template>
  <v-btn @click="localContent">
    获取 userStore
  </v-btn>
  <v-btn @click="goPage" :loading="loading">
    获取分页数据
  </v-btn>
  <v-table density="compact" :theme="`${activeThemeName}`" fixed-header>
    <thead>
    <tr>
      <th>
        用户名
      </th>
      <th>
        真实名
      </th>
      <th>
        创建日期
      </th>
      <th>
        部门
      </th>
      <th>
        操作
      </th>
    </tr>
    </thead>
    <tbody>
    <template v-if="userPageData.data">
      <tr v-for="item in userPageData.data" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item?.uRealName }}</td>
        <td>{{ item?.uCreateTime }}</td>
        <td>{{ item?.DepartmentName }}</td>
        <td>
          <v-btn>删除</v-btn>
          <v-btn>编辑</v-btn>
        </td>
      </tr>
    </template>

    </tbody>
  </v-table>
</template>


<style lang="scss" scoped>

thead td {
  color: white !important;
}
</style>
